
import React from 'react';
import { useFitness,FitnessData} from '../../contexts/FitnessContext';
const AddForm: React.FC= () => {
    const {newData,setNewData,onAdd}=useFitness()
    const handleAdd = () => {
        // 这里可以添加一些验证逻辑
        const data = {
            height: parseFloat(newData.height),
            weight: parseFloat(newData.weight),
            lungs_capacity: parseFloat(newData.lungs_capacity),
            running_time: parseFloat(newData.running_time),
        };
        //数据验证，是number才传
        if (validateInput(data)) {
            onAdd(data);
        } else {
            alert('请输入有效的数据');
        }
    };
    const validateInput = (data: Omit<FitnessData, 'id' | 'score'>) => {
        return Object.values(data).every(v => v > 0);
    };
    return (
        <>
            <div className="bg-white rounded-lg shadow p-6 mb-8">
                <h3 className="text-xl font-semibold text-gray-700 mb-4">添加新记录</h3>
                <div className="grid grid-cols-2 gap-4">
                    <div>
                        <label className="block text-sm font-medium text-gray-600 mb-2">身高（厘米）</label>
                        <input
                            type="number"
                            placeholder="请输入身高"
                            value={newData.height}
                            onChange={(e) => setNewData({ ...newData, height: e.target.value })}
                            className="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                        />
                    </div>
                    <div>
                        <label className="block text-sm font-medium text-gray-600 mb-2">体重（千克）</label>
                        <input
                            type="number"
                            placeholder="请输入体重"
                            value={newData.weight}
                            onChange={(e) => setNewData({ ...newData, weight: e.target.value })}
                            className="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                        />
                    </div>
                    <div>
                        <label className="block text-sm font-medium text-gray-600 mb-2">肺活量（毫升）</label>
                        <input
                            type="number"
                            placeholder="请输入肺活量"
                            value={newData.lungs_capacity}
                            onChange={(e) => setNewData({ ...newData, lungs_capacity: e.target.value })}
                            className="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                        />
                    </div>
                    <div>
                        <label className="block text-sm font-medium text-gray-600 mb-2">跑步时间（秒）</label>
                        <input
                            type="number"
                            placeholder="请输入跑步时间"
                            value={newData.running_time}
                            onChange={(e) => setNewData({ ...newData, running_time: e.target.value })}
                            className="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                        />
                    </div>
                </div>
                <button onClick={handleAdd} className="mt-4 px-6 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors duration-200"
                >添加记录</button>
            </div>
        </>
    );
};

export default AddForm;
